<template>
    <div class="header_container">
        <el-page-header icon="">
            <template #content>
                <span>{{ headerTitle }}</span>
            </template>
            <template #extra>
                <div class="flex flex-wrap items-center">
                    <el-dropdown>
                        <el-button type="primary">
                            换肤
                            <el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="handleThemeChange('dark')">暗黑</el-dropdown-item>
                                <el-dropdown-item @click="handleThemeChange('')">明亮</el-dropdown-item>
                                <el-dropdown-item divided disabled @click="toggleDark()">
                                    element-plus换肤
                                </el-dropdown-item>

                                <el-dropdown-item @click="loadTheme('yellow')" disabled divided>
                                    css换肤(屎黄)
                                </el-dropdown-item>
                                <el-dropdown-item @click="loadTheme('blue')" disabled>css换肤(蓝色)</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </template>
        </el-page-header>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { onBeforeUpdate, onMounted, ref } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
const counterStore = useCounterStore(); // pinia
const { theme } = storeToRefs(counterStore); // 保持响应式
const { setTheme } = counterStore; // 方法可以直接解构

const router = useRouter();
const route = useRoute();
const headerTitle = ref('首页');

// 1.换肤(存pinia)  方案css变量
const handleThemeChange = (theme: string) => {
    setTheme(theme);
};

// 2.换肤 动态设置class  element-plus自带(只对element-plus组件生效，只适用于用element-plus布局的页面和组件)
const isDark = ref(false);
const toggleDark = () => {
    const html = document.documentElement;
    isDark.value = !isDark.value;
    isDark.value ? html.classList.add('dark') : html.classList.remove('dark');
};

// 3.换肤 SCSS变量编译（预处理器方案），需要设置scss函数

// 4.换肤 动态加载css文件（js方案,动态创建link标签）  这个需要绑定class
const loadTheme = (themeName: string) => {
    // 删除已存在的主题标签
    document.querySelectorAll('link[data-theme]').forEach(link => {
        link.parentNode?.removeChild(link);
    });
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = `src/assets/style/${themeName}.css`;
    link.setAttribute('data-theme', 'true'); // 添加标记属性
    document.head.appendChild(link);
    console.log(link, link.href);
};

// 动态设置title
const setTitle = () => {
    let title = route.meta.title as string;
    headerTitle.value = title;
    document.title = title;
};

onBeforeUpdate(() => {
    setTitle();
});

// 路由守卫
router.beforeEach((to, from, next) => {
    headerTitle.value = to.meta.title as string;
    next();
});
</script>

<style scoped></style>
